import {ProCard} from "@ant-design/pro-components";
import {Button, Col, message, Row, Select, Space} from "antd";
import MonacoEditor from "react-monaco-editor";
import {monacoThemeOption} from "@/common/monaco";
import {useState} from "react";
import {onlineExecuteCode} from "@/services/ant-design-pro/daimashaxiang";
import {Viewer} from "@bytemd/react";

const options = {
  selectOnLineNumbers: true,
};
const editorDidMount = (editor, monaco) => {
  console.log('editorDidMount', editor);
  editor.focus();
};
export default () => {

  const [theme, setTheme] = useState<string>();
  const [executeCodeRequest, setExecuteCodeRequest] = useState({
    language:"java",
    code:""
  })
  const [executeResponse, setExecuteResponse] = useState<string>("")

  /**
   * 运行代码
   */
  const runCode = async () => {
    const res = await onlineExecuteCode({
      ...executeCodeRequest
    })
    if (res?.code === 200) {
      if (res?.data?.outputList){
        setExecuteResponse(res?.data?.outputList.join("/n"))
      }
      return;
    }
    message.error(res?.message)
  }

  return (
    <>
      <Row>
        <Col span={12}>
          <ProCard
            boxShadow={true}
            actions={[
              <Button key="1" type="link"></Button>,
              <Button key="1" type="link"></Button>,
              <Button key="1" type="link"></Button>,
              <Button key="1" type="link"></Button>,
              <Button key="1" type="link"></Button>,
              <Button key="1" type="link"></Button>,
              <Button key="running" type="default" onClick={runCode}>
                运行
              </Button>,
            ]}
            extra={
              <>
                <Space>
                  <Space>
                    主题:
                    <Select
                      defaultValue="light"
                      style={{ width: 100 }}
                      options={monacoThemeOption}
                      onChange={(value) => setTheme(value)}
                    />
                  </Space>
                  <Space>
                    语言:
                    <Select
                      style={{ width: 100 }}
                      defaultValue={'java'}
                      onChange={(language) => {
                        setExecuteCodeRequest({
                          ...executeCodeRequest,
                          language: language,
                        });
                      }}
                      options={[
                        {
                          label: 'java',
                          value: 'java',
                        },
                        {
                          label: 'python',
                          value: 'python',
                        },
                      ]}
                    />
                  </Space>
                </Space>
              </>
            }
          >
            <MonacoEditor
              // width="750"
              height="630"
              language={executeCodeRequest?.language}
              theme={theme}
              // theme="vs"
              value={executeCodeRequest?.code}
              options={options}
              onChange={(code) => {
                setExecuteCodeRequest(prevState=>{
                  return {
                    ...prevState,
                    code
                  }
                });
              }}
              editorDidMount={editorDidMount}
            />
          </ProCard>
        </Col>
        <Col span={12}>
          <ProCard
            boxShadow={true}
            style={{
            height:750
          }}>
            <Viewer  value={executeResponse}>

            </Viewer>
          </ProCard>
        </Col>
      </Row>
    </>
  );


}
